<template>
  <div>
    <div class="table-page-search-wrapper">
      <a-form-model layout="inline" ref="ruleForm" :model="queryParam">
        <z-form-item :datas="fieldArr" :form="queryParam" :gutter="24" :toggle="toggleSearchStatus">
          <a-col :span="8" slot="submit-action">
            <a-space :size="6">
              <a-button type="primary" @click="onQuery" icon="search">查询</a-button>
              <a-button @click="onResetForm" icon="reload">重置</a-button>
            </a-space>
          </a-col>
        </z-form-item>
      </a-form-model>
    </div>
    <div>
      <z-table
        ref="table"
        rowKey="id"
        :showAlert="false"
        :showSelection="false"
        :loading="loading"
        :columns="columns"
        :dataSource="pageData"
        @selectedRow="onSelectedRow"
        @change="onTableChange"
      >
      </z-table>
    </div>
  </div>
</template>

<script>
import {listFor} from "@views/sjsk/modules/list";

export default {
  name: "cultivate",
  mixins:[listFor],
  data(){
    return {
      queryParam: {},
      fieldArr: [
        {label: '姓名', prop: 'suspectAccountName', tagType: 'input', span: 5}
      ],
      toggleSearchStatus:true,

      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) => {
            return `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
          }
        },
        {
          title: '性别',
          dataIndex: 'incidentName',
          width: 60,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={14} />
          }
        },
        {
          title: '身份证号',
          dataIndex: 'incidentCode',
          width: 110,
          align: 'left',
          customRender: text => {
            return <j-ellipsis value={text} length={20} />
          }
        },
        {
          title: '人员类型',
          dataIndex: 'name',
          width: 80,
          align: 'center'
        },
        {
          title: '联系电话',
          dataIndex: 'labelAddress',
          width: 100,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={14} />
          }
        },
        {
          title: '管辖地区',
          dataIndex: 'loginStatus',
          width: 80,
          align: 'center'
        },
        {
          title: '入库时间',
          dataIndex: 'labelName',
          width: 100,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={14} />
          }
        },
        {
          title: '操作',
          width: 120,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        }
      ],

    }
  },
  methods:{
    onQuery() {
      // this.pageFilter.pageNo = 1
      // this.refreshTable()
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log(this.queryParam)
        } else {
          return false
        }
      })
    },
    onResetForm() {
      // this.form = {}
      // this.pageFilter.pageNo = 1
      // this.pageFilter.pageSize = 10
      // this.refreshTable()
      this.$refs.ruleForm.resetFields()
    },

  }
}
</script>

<style scoped>

</style>